<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('单位管理-下级单位')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row" id="xiajidanwei_list">

        <input name="deptid" th:value="${deptid}" type="hidden" id="deptid">
        <input name="deptlevel" th:value="${deptlevel}" type="hidden" id="deptlevel">

        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 80px !important;">特贴单位&nbsp;&nbsp;</label>
                            <input style="width: 150px !important;" type="text" name="deptname" v-model="deptname"/>
                        </li>
                        <!--<li>
                            <label>单位级别&nbsp;&nbsp;</label>
                            <select name="deptlevel" th:with="type=${@dict.getType('sys_jigoujibie')}" v-model="deptlevel" class="form-control" type="text">
                                <option value="">请选择</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </li>-->
                        <li>
                            <label style="width: 80px !important;">单位类型&nbsp;&nbsp;</label>
                            <select style="width: 150px !important;" name="depttype" th:with="type=${@dict.getType('sys_jigouleixing')}" v-model="depttype" class="form-control" type="text">
                                <option value="">请选择</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 80px !important;">省份&nbsp;&nbsp;</label>
                            <select style="display: inline;width: 150px !important;" id="shengfen" name="shengfen" v-model="shengfen" class="form-control" type="text" @change="BindChengshiByShengfen()">
                                <option value="">请选择</option>
                                <option v-for="shengfen in shengfenlist" :value="shengfen.id">{{shengfen.text}}</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 80px !important;">城市&nbsp;&nbsp;</label>
                            <select style="display: inline;width: 150px !important;" id="chengshi" name="chengshi" v-model="chengshi" class="form-control" type="text">
                                <option value="">请选择</option>
                                <option v-for="chengshi in chengshilist" :value="chengshi.id">{{chengshi.text}}</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 80px !important;">单位状态&nbsp;&nbsp;</label>
                            <select style="width: 150px !important;" name="status" v-model="status" class="form-control" type="text">
                                <option value="">请选择</option>
                                <option value="1">正常</option>
                                <option value="0">注销</option>
                            </select>
                        </li>
                        <li class="sousuo">
                            <a class="btn btn-success btn-md" @click="bindDeptList"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-md" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">

            <div style="display: flex">
                <div class="btn-group-md" id="toolbar" role="group">
                    <button class="btn btn-warning dim" @click="Export">
                        <i class="fa fa-download"></i> 导出
                    </button>
                </div>

                <div class="alert alert-success" style="margin-left: 30px;margin-top:10px;">
                    单位层级示例：一级单位，上海市;    二级单位，中共上海市教育卫生工作委员会;     三级单位，上海海事大学
                </div>
            </div>

            <table id="bootstrap-table" class="table table-bordered table-hover table-striped">
                <thead>
                <tr>
                    <th style="width: 50px;">序号</th>
                    <th>特贴单位</th>
                    <th>单位级别</th>
                    <th>单位类型</th>
                    <th>地区</th>
                    <th>负责人办公电话</th>
                    <th>负责人手机</th>
                    <th>单位状态</th>
                    <th style="width: 300px;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(deptitem,index) in deptlist"  v-if="deptlist.length > 0">
                    <td v-text="index+1"></td>
                    <!--单位名称-->
                    <td v-text="deptitem.deptname" style=" text-align: center;color:#1c84c6;cursor: pointer" title="联系方式" @click="toLianxifangshi(deptitem.deptid)"></td>
                    <!--单位级别-->
                    <td v-text="deptitem.deptlevel_text"></td>
                    <!--单位类型-->
                    <td v-text="deptitem.depttype_text"></td>
                    <!--地区-->
                    <td style="vertical-align: middle; text-align: center;" v-if="deptitem.chengshi_text!=null" v-text="deptitem.shengfen_text+deptitem.chengshi_text"></td>
                    <td style="vertical-align: middle; text-align: center;" v-else v-text="deptitem.shengfen_text"></td>
                    <!--负责人办公电话-->
                    <td v-text="deptitem.fuzerenbangongdianhua"></td>
                    <!--负责人手机-->
                    <td v-text="deptitem.fuzerenshouji"></td>
                    <!--单位状态-->
                    <td v-if="deptitem.status=='1'"><span class="badge badge-primary">正常</span></td>
                    <td v-else><span class="badge badge-danger">停用</span></td>
                    <!--操作-->
                    <td>
                        <button class="btn btn-success btn-md" @click="toChakan(deptitem.deptid)">查看</button>
                        <button v-if="deptitem.deptlevel!=3" class="btn btn-success btn-md btn-outline" @click="toXiaji(deptitem)">下级单位</button>
                    </td>
                </tr>
                <tr v-if="deptlist.length == 0">
                    <td style="text-align: center; vertical-align: middle" colspan="9">查无数据</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 查看单位信息 -->
        <div th:replace="system/danweiguanli/modal_chakan::dept_chakan"></div>
        <!-- 查看单位联系方式 -->
        <div th:replace="system/danweiguanli/modal_lianxifangshi::lianxifangshi"></div>

    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    var prefix = ctx + "system/deptxinxi";

    var vm_xiajidanwei_list = new Vue({
        el: "#xiajidanwei_list",
        data: {
            deptid:$("#deptid").val(),//当前登录的单位ID
            jigoujibie:$("#deptlevel").val(),//当前登录的单位级别

            //查询用字段
            deptname: "",//单位名称
            deptlevel: "",//单位级别
            depttype: "",//单位类型
            shengfen: "",//省份
            chengshi: "",//城市
            status: "",//单位状态

            //字典表
            shengfenlist:[],//省份
            chengshilist:[],//城市

            //查询列表
            deptlist:[],//单位列表
            dept:{},//单个单位

        },
        created: function () {
            var _this = this;

            //初始化界面控制
            _this.InitControl();
            //绑定单位列表
            _this.bindDeptList();

        },
        watch:{
        },
        methods: {

            InitControl:function(){
                var _this = this;

                _this.BindShengfen();
                _this.BindDiqu();
                _this.BindChengshiByShengfen();
            },

            BindShengfen:function(){
                var _this = this;

                var dept_layer = layer.open({type: 3});
                $.post('/system/shengfen/findallshengfen', {
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(dept_layer);

                    if (ppData != null) {
                        var data = ppData;
                        _this.shengfenlist = data.resultContent;
                    }
                }, "json");
            },

            BindDiqu:function(){
                var _this = this;

                var dept_layer = layer.open({type: 3});
                $.post('/system/chengshi/findallchengshi', {
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(dept_layer);

                    if (ppData != null) {
                        var data = ppData;
                        _this.chengshilist = data.resultContent;
                    }
                }, "json");
            },

            BindChengshiByShengfen:function(){
                var _this = this;

                _this.dept.chengshi = '';

                var dept_layer = layer.open({type: 3});
                $.post('/system/chengshi/findallchengshi', {
                    shengfenid : _this.shengfen,
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(dept_layer);

                    if (ppData != null) {
                        var data = ppData;
                        _this.chengshilist = data.resultContent;
                    }
                }, "json");
            },

            // 绑定单位列表
            bindDeptList: function () {
                var _this = this;

                var dept_layer = layer.open({type: 3});
                $.post(prefix+'/customlist', {
                    parentid: _this.deptid,
                    deptname: _this.deptname,
                    deptlevel: _this.deptlevel,
                    depttype: _this.depttype,
                    shengfen: _this.shengfen,
                    chengshi:_this.chengshi,
                    status:_this.status,
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(dept_layer);

                    if (ppData != null) {
                        if (ppData.result=='1'){
                            var data = ppData.resultContent;
                            _this.deptlist = data;
                        }else{
                            layer.alert(ppData.message);
                        }
                    }
                }, "json");
            },

            // 点击查看
            toChakan: function (deptid) {
                var _this = this;

                $("#myModalLabel1").html("查看单位信息");
                $("#modal-dialog1").attr("style", "width:1200px;");
                $("#deptModal1").modal();

                _this.deptid=deptid;
                _this.dept = {};
                _this.bindDept();
            },

            // 点击单位名称，联系方式
            toLianxifangshi:function (deptid) {
                var _this = this;

                $("#myModalLabel2").html("单位联系方式");

                _this.deptid=deptid
                _this.dept = {};
                _this.bindDept();
                $("#lianxifangshiModal").modal();
            },

            // 查询单个单位
            bindDept: function () {
                var _this = this;

                var dept_layer = layer.open({type: 3});
                $.post(prefix+'/customone', {
                    deptid: _this.deptid,
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(dept_layer);

                    if (ppData != null) {
                        if (ppData.result=="1") {
                            var data = ppData.resultContent;
                            _this.dept = data;
                            _this.dept.deptid = _this.deptid;
                        } else {
                            layer.alert(ppData.message);
                        }
                    }
                }, "json");
            },

            toXiaji:function (deptitem) {
                $.modal.openTab("下级单位","/system/danweiguanli/xiajidanwei_list?deptid="+deptitem.deptid+"&deptlevel="+deptitem.deptlevel);
            },

            Export:function(){
                var _this = this
                location.href = "/system/daochu/deptxinxi?parentid="+_this.deptid
                    +"&deptname="+_this.deptname
                    +"&deptlevel="+_this.deptlevel
                    +"&depttype="+_this.depttype
                    +"&shengfen="+_this.shengfen
                    +"&chengshi="+_this.chengshi
                    +"&status="+_this.status
            },
        }
    })
</script>
</body>
</html>